<template>
    <div class="login" >   
        <Row class="login-box">
            <Col span="6" offset="9">
                <p class="login-title">保东门业后台登录</p>
                <Form ref="formInline" :model="formInline" :rules="ruleInline">
                    <Form-item prop="user">
                        <Input type="text" v-model="formInline.user" placeholder="Username">
                            <Icon type="ios-person-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item prop="password">
                        <Input type="password" v-model="formInline.password" placeholder="Password">
                            <Icon type="ios-locked-outline" slot="prepend"></Icon>
                        </Input>
                    </Form-item>
                    <Form-item>
                        <Button type="primary" @click="handleSubmit('formInline')" class="btn-submit">登录</Button>
                    </Form-item>
                </Form>
            </Col>
        </Row>
    </div>
</template>

<script>
import api from 'api';
export default {
    name: 'login',
    data () {
        return {
            formInline: {
                user: '',
                password: ''
            },
            ruleInline: {
                user: [
                    { required: true, message: '请填写用户名', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: '请填写密码', trigger: 'blur' },
                    { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                ]
            }
        }
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (valid) {
                    if (this.formInline.user == 'test' && this.formInline.password == '123456') {
                        this.$router.push('/entry')
                    }
                } else {
                    this.$Message.error('登录失败!');
                }
            })
        }
    },
    mounted () {
        console.log(api);
    }
}
</script>

<style lang="less">
.login {
    min-width: 1000px;
    background: url(../assets/loginbg.jpg) no-repeat;
    background-size: 100% 100%;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    .login-title {
        color: #fff;
        text-align: center;
        margin-bottom: 20px;
        font-size: 24px;
    }
    .login-box {
        margin-top: 150px;
        .btn-submit {
            width: 100%
        }
    }
}
</style>